<template>
  <div class="audit-echart component-root-container">
    <el-header >
      <el-form ref="contractRule" :rules="contractRule" :model="headerCheck" label-width="120px" label-position="right">
        <el-row>
          <el-col :span="8">
            <el-form-item label="选择时间" prop="selectedDate">
              <el-date-picker id="monthPicker"
                ref="monthPicker"
                v-model="headerCheck['selectedDate']"
                type="daterange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8" class="col_button">
            <div class="button">
              <el-button class="query" @click="buttonClick">
                查询
              </el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-header>

    <el-main style="padding-top:0;">
      <el-row>
        <el-col>
          <div class="chart-panel">
            <IEcharts style="min-height:320px;" :option="barOptions" :loading="loading" :resizable="resizable"/>
          </div>

          <div style="margin-top: 10px;">
              <el-table v-loading="listLoading" ref="tableData" border :data="tableData" class="table-bottom"
                element-loading-text="数据加载中...">
                <el-table-column :label="item.label" :property="item.prop" v-for="item in tableColumns" :key="item.prop" :width="item.width" align="center">
                </el-table-column>
              </el-table>
          </div>
        </el-col>
      </el-row>

      <el-row style="margin-top: 10px;">
        <el-col>
          <div class="chart-title">审核未通过原因分析</div>
          <div>
             <div style="text-align: center;">
                <el-form ref="headerCheck" :rules="headerCheck" :model="headerCheck" label-width="0">
                  <el-form-item label="" prop="scene">
                    <el-select v-model="headerCheck['scene']" @change="selectSence" placeholder="请选择场景" clearable style="width:250px;">
                      <el-option v-for="item in sceneTypes" :key="item.key" :label="item.value" :value="item.key"></el-option>
                    </el-select>
                  </el-form-item>
                 </el-form>
             </div>

              <el-row :gutter="15">
                <el-col :span="12">
                  <div class="chart-panel">
                      <IEcharts style="min-height:400px;" :option="pieOptions" :loading="pieLoading" :resizable="resizable" />
                  </div>
                </el-col>
                <el-col :span="12">
                  <el-card style="min-height:420px;">
                    <el-table v-loading="list2Loading" ref="noPassData" border :data="noPassData" class="table-bottom"
                      element-loading-text="数据加载中..." show-summary="true">
                      <el-table-column prop="no" align="center" label="序号" width="80px">
                      </el-table-column>
                      <el-table-column prop="reason" align="center" label="未通过原因" show-overflow-tooltip>
                      </el-table-column>
                      <el-table-column prop="queryCount" align="center" label="数量" width="100">
                      </el-table-column>
                    </el-table>
                  </el-card>
                </el-col>
              </el-row>

          </div>
        </el-col>
      </el-row>

    </el-main>
  </div>
</template>

<script>
  import IEcharts from 'vue-echarts-v3/src/full.js'

  export default {
    components: {
      IEcharts
    },
    data() {
      return {
        headerCheck:{
          selectedDate: [],
          scene:null
        },
        loading:false,
        listLoading: false,
        pieLoading:false,
        list2Loading: false,
        resizable: true,

        tableColumns:[
          {prop:'calweek',label:'变更项',width:250},
          {prop:'queryCount',label:'自动审核数量'},
          {prop:'passCount',label:'自动审核通过数量'},
          {prop:'per',label:'自动审核通过率'},
          {prop:'trans2man',label:'转人工数量'}
        ],
        tableData: [],
        noPassData:[],

        barChartData: {
          category:[],
          query:[],
          pass:[],
          per:[]
        },
        pieChartData: {
          legend:[],
          data:[]
        },

        barOptions:{},
        pieOptions:{},

        contractRule: {
          selectedDate: [{
            required: true,
            message: '请选择时间段',
            trigger: 'blur'
          }]
        },

        sceneTypes: [{
            key: '1.1',
            value: '项目状态实时获取'
          },
          {
            key: '1.2',
            value: '采购、入库、付款单据匹配检查'
          },
          {
            key: '1.3',
            value: '工程物资一致性检查'
          },
          {
            key: '1.4',
            value: '物资参考价提示'
          },
          {
            key: '1.5',
            value: '产品与资源一致性检查'
          },
          {
            key: '1.6',
            value: '站址周边场租水平提示'
          },
          {
            key: '2.2',
            value: '订单打标业务状态查询'
          },
          {
            key: '2.3',
            value: '固化数据绑定订单查询'
          },
          {
            key: '2.5',
            value: '订单起租不及时风险校验'
          },
          {
            key: '2.6',
            value: '资源打标业务状态查询'
          },
          {
            key: '2.7',
            value: '集中操作关联查询展示'
          },
          {
            key: '2.8',
            value: '场地费(场地租金)自动稽核'
          },
          {
            key: '2.9',
            value: '客户提前退租的赔偿金额校验'
          },
          {
            key: '2.10',
            value: '铁塔信息变更合规性校验'
          },
          {
            key: '2.11',
            value: '机房信息变更合规性校验'
          },
          {
            key: '2.12',
            value: '拆站合规性校验'
          },
          {
            key: '2.13',
            value: '长期无法服务合规性校验'
          },
          {
            key: '2.14',
            value: '存量历史站交割合规性校验'
          },
          {
            key: '2.15',
            value: '场地费（一次性进场费及协调费）合规性校验'
          },
          {
            key: '2.16',
            value: '场地费（土地征用费）变更合规性校验'
          },
          {
            key: '2.17',
            value: '天线挂高变更合规性校验'
          },
          {
            key: '2.18',
            value: '塔类首家租户判断检查'
          }
        ],

        commonConf:{
          toolbox: {
            show: false,
            right: 30,
            feature: {
              restore: {
                show: true
              },
              saveAsImage: {
                show: true
              },
              magicType: {
                show: true,
                type: ['bar', 'line']
              }
            }
          },
          tooltip: {
              trigger: "axis",
              axisPointer: {
                  type: "shadow",
                  textStyle: {
                      color: "#fff"
                  }

              },
          },

          grid:{
            top: '30px',
            left: '20px',
            right: '50px',
            bottom: '30px',
            containLabel: true
          },
          itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: '#666',
                    fontSize: 10
                  },
                  formatter: function(p) {
                    let value = ''
                    if (p.value > 0) {
                      value = p.value
                      if (value > 999) {
                        let parts = value.toString().split('.')
                        parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',')
                        value = parts.join('.')
                      }
                    }
                    return value
                  }
                }
              }
          }
        }
      }
    },
    created() {
    },
    mounted() {},
    computed: {
    },
    methods: {

      async buttonClick() {
        this.listLoading = true
        this.loading = true
        try {
          await this.$refs['contractRule'].validate()
          const data = {
            startDate: this.headerCheck.selectedDate[0].replace(/-/g,''),
            endDate: this.headerCheck.selectedDate[1].replace(/-/g,''),
          }

          this.restCacheData();

          const r = await this.$http({
            url: this.$http.adornBizUrl('/log/passingRate'),
            method: 'post',
            data: this.$http.adornData('param=' + JSON.stringify(data), false),
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
            }
          })
          var resultData = r.data.data;
          if (resultData && resultData.length > 0) {
              var self = this;
              //console.log(resultData);
              resultData.forEach(function(item,i){
                  self.barChartData.category.push(item.calweek);
                  self.barChartData.query.push(item.queryCount);
                  self.barChartData.pass.push(item.passCount);
                  self.barChartData.per.push((item.per*100).toFixed(1));

                  self.tableData.push({
                      calweek:item.calweek,
                      queryCount:item.queryCount,
                      passCount:item.passCount,
                      per:(item.per*100).toFixed(1)+'%',
                      trans2man:item.trans2man
                  });
              });
          }
          this.setBarChart(this.barChartData);

          if(this.headerCheck.scene != null){
              this.selectSence();
          }

        } catch (e) {
          console.log(e)
        } finally {
          this.listLoading = false
          this.loading=false
        }
      },

      async selectSence(){
          this.pieLoading=true;
          this.list2Loading=true;
          try {
            await this.$refs['contractRule'].validate()
            const data = {
              startDate: this.headerCheck.selectedDate[0].replace(/-/g,''),
              endDate: this.headerCheck.selectedDate[1].replace(/-/g,''),
              scene:this.headerCheck.scene
            }
            this.pieChartData= {
              legend:[],
              data:[]
            };
            this.noPassData=[]
            const r = await this.$http({
              url: this.$http.adornBizUrl('/log/failedReason'),
              method: 'post',
              data: this.$http.adornData('param=' + JSON.stringify(data), false),
              headers: {
                'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
              }
            })
            var resultData = r.data.data;
            if (resultData && resultData.length > 0) {
                var self = this;
                resultData.forEach((item,i)=>{
                    self.noPassData.push({
                        no:i+1,
                        reason:item.reason,
                        queryCount:item.queryCount
                    });

                    self.pieChartData.legend.push(item.reason);

                    self.pieChartData.data.push({
                        name:item.reason,
                        value:item.queryCount
                    });
                });
            }
            this.setPieChart(this.pieChartData);
          } catch (e) {
            console.log(e)
          } finally {
            this.pieLoading=false;
            this.list2Loading=false;
          }
      },

      async setBarChart(barChartData){
        var self = this;
        this.barOptions = {
          toolbox:self.commonConf.toolbox,
          xAxis: {
            type: 'category',
            data: barChartData.category
          },
          yAxis:[{
            name: '数量',
            type: 'value'
          },
          {
            name: '自动审核通过率',
            type: 'value',
            min: 0,
            max: 100,
            axisLabel: {
              formatter: '{value} %'
            },
            splitLine: null
          }],
          grid:{
            top: '30px',
            left: '20px',
            right: '20px',
            bottom: '30px',
            containLabel: true
          },
          legend: {
            x: 'center',
            y: 'bottom',
            data: ['自动审核数量','自动审核通过数量','自动审核通过率']
          },
          series: [{
            name: '自动审核数量',
            data: barChartData.query,
            type: 'bar',
            barGap:0,
            barMaxWidth: 30,
            itemStyle:self.commonConf.itemStyle
          },{
            name: '自动审核通过数量',
            data: barChartData.pass,
            type: 'bar',
            yAxisIndex: 0,
            barGap:0,
            barMaxWidth: 30,
            itemStyle:self.commonConf.itemStyle
          },{
            name: '自动审核通过率',
            data: barChartData.per,
            type: 'line',
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: '#666',
                    fontSize: 10
                  },
                  formatter: function(p) {
                    return p.value+'%'
                  }
                }
              }
            },
          }],
          tooltip:self.commonConf.tooltip
        }
      },

      async setPieChart(pieChartData){
        var self = this;
        this.pieOptions = {
          toolbox:self.commonConf.toolbox,
          grid:{
            top: '30px',
            left: '20px',
            right: '20px',
            bottom: '30px',
            containLabel: true
          },
          legend: {
            x: 'center',
            y: 'bottom',
            data: pieChartData.legend
          },
          series: [{
            name: '数量',
            data: pieChartData.data,
            type: 'pie',
            radius: '62%',
            itemStyle: {
                  normal:{
                      label:{
                          show:true,
                          position: 'inner',
                          textStyle:{color:'#fff',fontSize:"12"},
                          formatter:function(val){
                              //return val.name.split("-").join("\n");
                              return val.percent+'%';
                          }
                      }
                  }
              },
          }],
          tooltip: {
              trigger: 'item',
              formatter: "{a} <br/>{b} : {c} ({d}%)"
          }
        }
      },

      restCacheData(){
        this.tableData= []
        this.noPassData=[]

        this.barChartData= {
          category:[],
          query:[],
          pass:[],
          per:[]
        }
        this.pieChartData= {
          legend:[],
          data:[]
        }
      }

    }
  }
</script>

<style lang="scss" scoped>
  @import "../../../assets/scss/_formatQueryPage";
  @include formatQueryPage(0, 60%, left);
  .audit-echart {
    .date-picker-container {
      display: flex;
      justify-content: center;
      align-items: flex-end;

      .el-icon-caret-bottom {
        font-size: 30px;
        color: red;
      }
    }

    .el-date-editor {
      width: 60%;
    }

    .query {
      color: rgba(255, 255, 255, 1);
      background: rgba(235, 75, 75, 1);
      border-radius: 6px;
    }

    .chart-title {
      font-weight: 800;
      line-height: 35px;
    }

    .chart-panel {
      border: 1px solid #ebeef5;
      background-color: #fff;
      color: #303133;
      border-radius: 4px;
      padding: 10px 5px;
      overflow: hidden;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    }

    .el-card.is-always-shadow {
      border: 1px solid #e8e6e6;
      height: 400px;
    }
  }
</style>
